{include file="public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css">
<style>
    #matchCon {
        width: 200px;
    }

    .container .grid-wrap {
        position: relative;
    }

    .ztreeDefault {
        background-color: #fff;
        border: 1px solid #D6D5D5;
        width: 265px;
        height: 416px;
        overflow-y: auto;
    }

    td.img {
        background: url("/css/img/no_pic.gif") center no-repeat
    }

    .number_sku {
        padding: 13px 13px 0 0;
        position: absolute;
        right: 10px;
        top: 12px;
    }

    .number_sku:hover {
        cursor: pointer;
    }

    td[aria-describedby=grid_name] {
        position: relative;
    }

    .add {
        background: #fff url("/css/img/number_sku.png") no-repeat
    }

    .plus {
        background: #fff url("/css/img/number_sku.png") no-repeat 0 -13px
    }

    .isCommon {
        display: inline-block;
        background-color: #ECE40F;
        color: #000;
    }

    .unCommon {
        display: inline-block;
        background-color: #CAC9C5;
        color: #000;
    }

    .ztree.showRoot li ul.level0 {
        /* background: url(./img/line_conn.gif) 0 0 repeat-y; */
        padding: 0 0 0 18px;
    }

    .ztree.showRoot li span.button.switch.level0 {
        visibility: visible;
        width: 18px;
    }

    .layui-form-select .layui-edge,
    .layui-form-checkbox[lay-skin=primary] i {
        padding: 0;
    }

    .layui-form-select dl dd.layui-this {
        background-color: #dcdcdc;
        color: #000;
    }

    .layui-form-checkbox[lay-skin=primary]:hover i {
        border-color: #38B3EB;
    }

    .layui-form-checked[lay-skin=primary] i {
        border-color: #38B3EB !important;
        background-color: #38B3EB;
    }

    .layui-input,
    .layui-select {
        height: 30px;
    }

    .tabImg:hover {
        width: 500px;
    }

    .tree-indent {
        width: 0;
    }
</style>
<div class="container fix p20">
    <div class="mod-search m0 cf layui-form">
        <div class="fl">
            <ul class="ul-inline">
                <li>
                    <input type="text" id="matchCon" class="ui-input ui-input-ph" value="请输入商品编号或名称或型号">
                </li>
                <li>
                    <label>仓库:</label>
                    <span class="layui-input-inline" style="width: 130px;">
                        <!-- <input  type="text" class="input-txt" autocomplete="off" readonly="readonly" style="cursor: default; width: 84px;"><span class="trigger"></span></span> -->
                        <select name="interest" lay-filter="aihao">
                            <option value="">空</option>
                            <option value="0">默认仓库</option>
                        </select>
                    </span>
                </li>
                <li class="" id="chk-stock" style="line-height:30px;">
                    <input type="checkbox" name="" lay-skin="primary" title="零库存商品" checked="">
                </li>
                <li class="dn" id="chk-disabled-goods " style="line-height:30px;">
                    <input type="checkbox" name="" lay-skin="primary" title="显示禁用商品">
                </li>
                <li><a class="ui-btn mrb" id="search">查询</a><!-- <a class="ui-btn" id="refresh">刷新</a> -->
                </li>
                <li><a class="ui-btn mrb" id="generalGoods">常用商品</a><!-- <a class="ui-btn" id="refresh">刷新</a> -->
                </li>
            </ul>
        </div>
    </div>
    <div style="width: 100%;height: auto;display: flex;">
        <div class="grid-wrap" style="flex: 1;">
            <table id="grid">
            </table>
            <div id="page"></div>
        </div>

        <ul class="ztree ztreeDefault showRoot easyui-tree" id="tt"
            style="height: 356px;flex: none;width: 200px;margin-left: 6px;">
            <!-- <li>
                <span>全部</span>
                <ul>
                    <li>
                        <span>默认分类</span>
                    </li>
                </ul>
            </li> -->
        </ul>

    </div>
</div>
<div id="initCombo" class="dn">
    <input type="text" class="textbox unitAuto" name="unit" autocomplete="off">
</div>

<!-- 列表鼠标移入显示大图的容器 -->
<div id="maxImg" style="position: absolute;z-index: 999;display: none;">
    <img src="/public/static/admin/css/img/btn_descease_normal.png" width="250" height="250" />
</div>

<script src="/public/static/admin/easyui/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>

<script>
    // 监听列表图片（鼠标移入事件）
    function mouseover(x, img, id) {
        // console.log(id)
        var tableImg = "tableImg" + id;
        var top = $("#" + tableImg).offset().top;
        var left = $("#" + tableImg).offset().left;
        $("#maxImg>img").attr("src", img)
        $("#maxImg").show();
        $("#maxImg").css({ "top": (top - 45) + "px", "left": (left + 24) + "px" });

    };
    // 监听列表图片（鼠标移出事件）
    function mouseout(params) {
        $("#maxImg").hide();
    }

    $(document).ready(function () {
        // 列表大图鼠标移入移出
        $("#maxImg").hover(function () {
            $("#maxImg").show();
        }, function () {
            $("#maxImg").hide();
        });

        $('#tt').tree({
            url: 'getGoodCategory.html',
            onClick: function (node) {
                // f5('index.html?ajax=100&goods_category=' + node.id);

                //此处可以添加对查询数据的合法验证 
                $("#grid").jqGrid('setGridParam', {
                    datatype: 'json',
                    postData: { 'ajax': '100', 'goods_category': node.id }, //发送数据 
                    page: 1
                }).trigger("reloadGrid"); //重新载入 
            }
        });

        $("#grid").jqGrid({
            url: '/admin/basic/choose_goods.html?ajax=100',
            datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
            height: '304px',//高度，表格高度。可为数值、百分比或'auto'
            //width: Public.setGrid().w,
            //height: Public.setGrid().h,
            colNames: ["图片", "商品编号", "商品名称", "规格型号", "商品类别", "单位", "库存基本数量", "可用库存", "录入数量", "备注", "常用商品"],
            colModel: [

                { name: '', width: 40, lable: '图片', editable: false, formatter: imgs },
                { name: 'sn', width: 100, lable: '商品编号', editable: false },
                { name: 'name', width: 200, lable: '商品名称', editable: false },
                { name: 'model', width: 106, lable: '规格型号', editable: false },
                { name: 'goods_category_id', width: 80, lable: '商品类别', editable: false },
                { name: 'unit', width: 80, lable: '单位', editable: true },
                { name: '', width: 70, lable: '库存基本数量', editable: false },
                { name: '', width: 70, lable: '可用库存', editable: false },
                { name: '', width: 70, lable: '录入数量', editable: true },
                { name: '', width: 100, lable: '备注', editable: false },
                { name: '', width: 60, lable: '常用商品', editable: false, formatter: cCommon },
            ],
            //cellEdit:true,
            cellurl: '/',
            // cellsubmit:false,
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: "desc",
            pagerpos: "left",//分页位置

            pgbuttons: true,//翻页按钮
            pagination: true,
            altRows: !0,
            gridview: !0,
            shrinkToFit: !1,
            cellLayout: 8,
            autowidth: !0,
            pager: "#page",
            viewrecords: !0,
            checkOnSelect: true,
            multiselect: true,//自带多选
            // multiboxonly:true,//变成单选
            cmTemplate: {
                sortable: !1,
                title: !1
            },
            loadError: function (t, e, i) {
                parent.Public.tips({
                    type: 1,
                    content: "操作失败了哦，请检查您的网络链接！"
                })
            }
        });

        function imgs(cellvalue, options, rowObject) {
			var img = '/public/static/admin/icon/no_pic.gif';
			if (rowObject.img_path != null) {
				img = '/public/uploads/' + rowObject.img_path;
				return '<img src="' + img + '" id="tableImg' + rowObject.id + '" width="40px" height="40px" onmouseout="mouseout()" onmouseover="mouseover(this, \''  + img + '\',' + rowObject.id + ')"/>';
			}
			else{
				return '<img src="' + img + '" id="tableImg' + rowObject.id + '" width="40px" height="30px" />';
			}
		}

        function cStatus(cellvalue, options, rowObject) {
            // console.log(rowObject.status);
            if (rowObject.status == 0) {
                return '<span class="set-status open" data-delete="false" onclick="switchs(this,' + rowObject.id + ')"><span class="ui-icon-circle"></span></span>';
            } else {
                return '<span class="set-status close" data-delete="false" onclick="switchs(this,' + rowObject.id + ')"><span class="ui-icon-circle"></span></span>';
            }
        }

        function cCommon(cellvalue, options, rowObject) {
            // console.log(rowObject.status);
            if (rowObject.is_common == 0) {
                return '<span class="common-set-status common-set-default" onclick="common(this,' + rowObject.id + ')" data-delete="false" ></span>';
            } else {
                return '<span class="common-set-status common-set-success" onclick="common(this,' + rowObject.id + ')" data-delete="true" ></span>';
            }
        }
    });

    function common(obj, id) {
        if ($(obj).hasClass("common-set-default")) {
            $(obj).removeClass("common-set-default");
            $(obj).addClass("common-set-success");
            is_common = 1;
        } else {
            $(obj).removeClass("common-set-success");
            $(obj).addClass("common-set-default");
            is_common = 0;
        }
    }
</script>
{include file="public/footer"/}